<template>
  <div class="awardList">
    <headerCont :page="'login'"></headerCont>
    <div class="awardListConetent">
      <div class="result_list_tit">
        <span>获奖成果</span>
      </div>
      <div class="result_info">
        <a-table
          ref="table"
          rowKey="id"
          :pagination="false"
          :scroll="{x:true}"
          :columns="columnsInfo"
          :dataSource="dataInfo"
          class="j-table-force-nowrap"
        >
                    <span slot="action" slot-scope="text, record">
                        <a>
                            <img style="width:18px;height:18px;margin-right:22px;" src="@/assets/img/yulan.png" alt="">
                        </a>
                    </span>
        </a-table>
      </div>
      <div class="result_list_tit">
        <span>证书列表</span>
      </div>
      <div class="certificate_list">
        <a-table
          ref="table"
          rowKey="id"
          :scroll="{x:true}"
          :columns="columns"
          :dataSource="dataList"
          :pagination="false"
          class="j-table-force-nowrap"
        >
          <span slot="action" slot-scope="text, record">
            <a @click="handelView(record)">
              <img style="width:18px;height:18px;margin-right:22px;" src="@/assets/img/yulan.png" alt="">
            </a>
          </span>
        </a-table>
      </div>
    </div>
    <footer-cont></footer-cont>
    <j-modal
      v-drag-modal
      class="pdfBox"
      :visible="visible"
      :width="700"
      :maskClosable="false"
      :switchFullscreen="switchFullscreen"
      @cancel="handleCancel"
      :footer="null">
      <template slot="title">
        <div>
          <span>证书预览</span>
          <!-- <span style="width:20px;display:inline-block;"></span>
          <span>{{this.$route.query.cxj_mc_zw}}</span>
          <span style="width:20px;display:inline-block;"></span>
          <span>{{this.$route.query.cxj_xmbh}}</span> -->
        </div>
      </template>

      <div class="certificateImg" ref="certificateImg" id="certificateImg">
        <img v-if="certificateInfo.shijian < 2024" src="@/assets/bgzs-2023.jpg" alt="" height="510">
        <img v-else-if="certificateInfo.shijian >= 2024 && certificateInfo.hjzsHjdj === '特等奖'" src="@/assets/bgzs-2024-2.jpg" alt="" height="510">
        <img v-else-if="certificateInfo.shijian >= 2024 && certificateInfo.hjzsHjdj !== '特等奖'" src="@/assets/bgzs-2024-1.jpg" alt="" height="510">
        <div class="content">
          <div class="title"></div>
          <div class="year">{{ certificateInfo.shijian }}</div>
          <div class="info">
            <p>{{ certificateInfo.cxjMcZw }}</p>
          </div>
          <div class="info1" v-if="certificateInfo.shijian >= 2024 && certificateInfo.hjzsHjdj !== '特等奖'">
            <p>{{ certificateInfo.cxjXmlb }}</p>
          </div>
          <div class="info2":class="certificateInfo.shijian >=2024 && certificateInfo.hjzsHjdj !== '特等奖' ? 'hjzsHjdj' : certificateInfo.hjzsHjdj !== '特等奖' ? 'hjzsHjdj1' : 'info2'">
            <p>{{ certificateInfo.hjzsHjdj }}</p>
          </div>
          <div class="info3":class="certificateInfo.shijian >= 2024 && certificateInfo.hjzsHjdj !== '特等奖' ? 'hjzsHjz' : certificateInfo.hjzsHjdj !== '特等奖' ? 'hjzsHjz1' : 'info3'">
            <p>{{ certificateInfo.hjzsHjz }}</p>
          </div>
          <div class="zsbh">
            <span>{{ certificateInfo.hjzsBh }}</span>
          </div>
          <div class="shijian">
            {{ certificateInfo.hjzsRq }}
          </div>
        </div>
      </div>
      <div class="btn" style="margin-top:30px;text-align:center;">
        <a-button type="primary" class="loadboard" @click="certificateDownload">证书下载</a-button>
      </div>
    </j-modal>
  </div>
</template>

<script>
import headerCont from '@/views/declarationSystem/common/header';
import footerCont from '@/views/declarationSystem/common/footer';
import {cxjgl_getHjzsById, cxjgl_queryByCxjId, cxjHjzs_list} from "@/api/shenbao.js"
import html2canvas from "html2canvas"

export default {
  data() {
    return {
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '所获奖项',
          align: "center",
          dataIndex: 'hjzsHjdj'
        },
        {
          title: '成果编号',
          align: "center",
          dataIndex: 'cxjXmbh'
        },
        {
          title: '成果名称',
          align: "center",
          dataIndex: 'cxjMcZw'
        },
        {
          title: '获奖者',
          align: "center",
          dataIndex: 'hjzsHjz'
        },
        {
          title: '证书编号',
          align: "center",
          dataIndex: 'hjzsBh'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 100,
          scopedSlots: {customRender: 'action'}
        }
      ],
      columnsInfo: [
        {
          title: '成果编号',
          align: "center",
          dataIndex: 'cxjXmbh',
          // width: 150
        }, {
          title: '成果名称',
          align: "center",
          dataIndex: 'cxjMcZw',
          // width: 150
        }, {
          title: '成果类别',
          align: "center",
          dataIndex: 'cxjXmlb',
          // width: 150
        }, {
          title: '完成单位',
          align: "center",
          dataIndex: 'cxjWcdwlist',
          width: 200
        }, {
          title: '主要完成人',
          align: "center",
          dataIndex: 'cxjWcrlist',
          width: 150
        }],
      dataList: [],
      dataInfo: [],
      certificateInfo: {},
      visible: false,
      switchFullscreen: true,
      imgUrl: ""
    }
  },
  components: {
    headerCont,
    footerCont
  },
  mounted() {
    this.cxjgl_queryByCxjIdInfo();
    this.onaxios();
  },
  methods: {
    handleCancel() {
      this.visible = false;
    },
    cxjgl_queryByCxjIdInfo() {
      cxjgl_queryByCxjId({
        cxjid: this.$route.query.id
      }).then(res => {
        if (res.data.code == 200) {
          this.dataInfo.push(res.data.result)
        }
      })
    },
    onaxios() {
      cxjHjzs_list({
        cxjid: this.$route.query.id
      }).then(res => {
        if (res.data.code == 200) {
          this.dataList = res.data.result;
        }
      })
    },
    handelView(record) {
      console.log(record)
      this.visible = true;
      cxjgl_getHjzsById({
        id: record.id
      }).then(res => {
        let data = res.data;
        if (data.code == 200) {
          this.certificateInfo = data.result;
          // this.certificateInfo.shijian = 2025;
          //this.certificateInfo.hjzsHjdj = '特等奖111';
          // this.certificateInfo.cxjXmlb = "信息化成果"
          console.log('获奖证书信息', this.certificateInfo)
        }
      })
    },
    certificateDownload() {
      this.$nextTick(() => {
        html2canvas(document.getElementById('certificateImg'), {
          scale: 3,      // 放大
          useCORS: true, // 使用CORS从服务器加载图像
          async: false, // 异步解析和呈现元素
          background: "#ffffff", // 背景颜色
          dpi: 300, // 处理模糊问题
        }).then(canvas => {
          const img = canvas.toDataURL("image/png").replace("data:image/png;base64,", "")
          const finalImageSrc = "data:image/png;base64," + img
          // 添加a标签用于下载
          const aElem = document.createElement('a')
          document.body.appendChild(aElem)  // 223kb
          aElem.href = finalImageSrc
          // 图片下载名
          aElem.download = "电力科技创新奖证书.jpg"
          aElem.click()
          document.body.removeChild(aElem)
        });
      })
    }
  }
}
</script>
<style lang='less'>
.pdfBox {
  &.fullscreen {
    .ant-modal {
      width: 100% !important;
      top: 0 !important;
      height: 100% !important;

      .ant-modal-content {
        max-height: 100% !important;
        height: 100% !important;

        .ant-modal-body {
          margin-top: 0;
        }
      }
    }
  }

  .ant-modal {
    width: 1200px !important;
    // top: 30px!important;
    height: 700px !important;

    .ant-modal-content {
      max-height: 700px !important;
      height: 700px !important;

      .ant-modal-body {
        margin-top: 30px;
      }
    }
  }
}
</style>
<style lang="less" scoped>
// 587.5*412.5
.awardListConetent {
  width: 1210px;
  margin: 0 auto;
  min-height: 460px;
  position: relative;
}

.result_list_tit {
  width: 100%;
  border-bottom: 1px solid #EEEEEE;

  span {
    display: inline-block;
    margin-top: 28px;
    padding-bottom: 14px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 25px;
    border-bottom: 3px solid #3388EE;
  }
}

.certificateImg {
  position: relative;
  width: 780px;
  height: 530px;
  margin: 0 auto;
  background: #ccc;

  img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    // z-index: -1;
  }

  .content {
    position: relative;
    z-index: 99;
    height: 530px;

    .title {
      padding-top: 57px;
      text-align: center;
      font-size: 32px;
      font-weight: bold;
      color: #000;
      font-family: "方正大黑简体";
    }
    .year {
      font-size: 35px;
      font-family:'方正大黑简体';
      padding-left: 135px;
      padding-top: 2px;
      color: #111111;
      letter-spacing:4px;
    }
    .info {
      padding-left: 229px;
      position: absolute;
      top: 224px;
      font-weight: bold;

      p {
        font-size: 17px;
        font-family: "黑体", "HeiTi", "Microsoft YaHei";
        color: #000;
        width: 500px;
        line-height: 20px;

        span {
          font-size: 17px;
          display: inline-block;
          width: 100px;
          text-align: justify;
          text-align-last: justify;
        }
      }
    }

    .info1 {
      padding-left: 229px;
      font-weight: bold;
      position: absolute;
      top: 267px;

      p {
        font-size: 17px;
        font-family: "黑体", "HeiTi", "Microsoft YaHei";
        color: #000;

        span {
          font-size: 17px;
          display: inline-block;
          width: 100px;
          text-align: justify;
          text-align-last: justify;
        }
      }
    }

    .info2 {
      padding-left: 229px;
      position: absolute;
      top: 268px;
      font-weight: bold;
      &.hjzsHjdj {
        top: 313px !important;
      }

      p {
        font-size: 17px;
        font-family: "黑体", "HeiTi", "Microsoft YaHei";
        color: #000;

        span {
          font-size: 17px;
          display: inline-block;
          width: 100px;
          text-align: justify;
          text-align-last: justify;
        }
      }
    }

    .info3 {
      padding-left: 229px;
      position: absolute;
      top: 315px;
      font-weight: bold;
      &.hjzsHjz {
        top: 360px !important;
      }
      p {
        font-size: 17px;
        font-family: "黑体", "HeiTi", "Microsoft YaHei";
        color: #000;

        span {
          font-size: 17px;
          display: inline-block;
          width: 100px;
          text-align: justify;
          text-align-last: justify;
        }
      }
    }

    .zsbh {
      position: absolute;
      bottom: 77px;
      left: 185px;
      color: #000;

      span {
        font-weight: bolder;
        font-size: 13px;
        letter-spacing: -0.7px;
        font-family: "Arial";
      }
    }

    .shijian {
      font-size: 11px;
      position: absolute;
      right: 143px;
      bottom: 73px;
      font-weight: 600;
      font-family: "宋体", "SongTi";
      letter-spacing: -0.7px;
      color: #000;
    }
  }
}

.certificate_list, .result_info {
  margin-top: 20px;
}
</style>